Lottie হলো একটি ওপেন সোর্স লাইব্রেরি, যা JSON ফাইলের মাধ্যমে Adobe After Effects এ তৈরি করা অ্যানিমেশনগুলোকে iOS, Android, এবং React Native অ্যাপ্লিকেশনে ইমপ্লিমেন্ট করতে দেয়। Lottie অ্যানিমেশন ব্যবহার করে ডেভেলপাররা খুব সহজেই কমপ্লেক্স এবং আকর্ষণীয় অ্যানিমেশন অ্যাপ্লিকেশনগুলোতে যোগ করতে পারে, যা ফ্লুইড এবং স্কেলেবল। Lottie ফাইলগুলো JSON ফরম্যাটে থাকে, যা খুবই হালকা এবং অ্যাপ্লিকেশনের পারফরম্যান্সেও প্রভাব ফেলে না।
কেন Lottie Animations ব্যবহার করা হয়?
- Scalable এবং Lightweight: Lottie অ্যানিমেশনগুলো JSON ফাইল হিসেবে সংরক্ষণ করা হয়, যা খুব হালকা এবং স্কেলেবল।
- Cross-Platform Support: Lottie অ্যানিমেশন একই JSON ফাইল ব্যবহার করে iOS, Android, এবং React Native অ্যাপ্লিকেশনে কাজ করে।
- Smooth and Complex Animations: Lottie দিয়ে তৈরি করা অ্যানিমেশনগুলো মসৃণ এবং ফ্লুইড হয়, যা সাধারণত UIKit বা Core Animation দিয়ে তৈরি করা কঠিন।
- Easy Integration: Lottie ফাইলগুলো সহজে iOS অ্যাপে ইমপ্লিমেন্ট করা যায় এবং অ্যানিমেশনের বিভিন্ন প্রপার্টি, যেমন: লুপ, স্পিড, প্রগ্রেস ইত্যাদি কাস্টমাইজ করা যায়।
Lottie Animations ব্যবহার করার জন্য প্রয়োজনীয় ধাপ
Step 1: Lottie iOS লাইব্রেরি ইন্সটল করা
প্রথমে, আপনার প্রোজেক্টে Lottie লাইব্রেরি ইন্সটল করতে হবে। আপনি CocoaPods ব্যবহার করে এটি ইন্সটল করতে পারেন। আপনার Podfile এ নিচের লাইনটি যুক্ত করুন:
pod 'lottie-ios'
তারপর টার্মিনালে pod install কমান্ডটি চালান।
Step 2: Lottie JSON ফাইল ডাউনলোড করা
Lottie অ্যানিমেশনগুলোর জন্য JSON ফাইল প্রয়োজন। আপনি LottieFiles.com থেকে অনেক ফ্রি অ্যানিমেশন ফাইল ডাউনলোড করতে পারেন। ডাউনলোড করা JSON ফাইলটি আপনার Xcode প্রোজেক্টে অ্যাড করুন।
Step 3: LottieView তৈরি করা
Lottie লাইব্রেরি ইমপোর্ট করুন এবং একটি Lottie অ্যানিমেশন ভিউ তৈরি করুন:
import UIKit
import Lottie
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Lottie অ্যানিমেশন ভিউ তৈরি করা
let animationView = LottieAnimationView(name: "exampleAnimation") // JSON ফাইলের নাম
animationView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
animationView.center = view.center
// Lottie অ্যানিমেশন কাস্টমাইজ করা
animationView.loopMode = .loop // অ্যানিমেশন বারবার লুপ করবে
animationView.contentMode = .scaleAspectFit
// অ্যানিমেশন ভিউতে অ্যাড করা এবং প্লে করা
view.addSubview(animationView)
animationView.play()
}
}
ব্যাখ্যা:
- LottieAnimationView: এটি Lottie অ্যানিমেশন লোড এবং প্রদর্শন করার জন্য ব্যবহৃত হয়। JSON ফাইলের নাম দিয়ে এটি ইনিশিয়ালাইজ করা হয়।
- loopMode: এটি অ্যানিমেশনের লুপ মুড সেট করতে ব্যবহৃত হয়। এখানে
.loopব্যবহার করা হয়েছে, যাতে এটি অবিরত চালাতে থাকে। - contentMode: ভিউয়ের কন্টেন্ট কিভাবে স্কেল হবে, তা নির্ধারণ করতে ব্যবহার করা হয়।
- play(): অ্যানিমেশনটি প্লে করা হয়।
Step 4: Customizing Lottie Animations
Lottie অ্যানিমেশনের বিভিন্ন প্রপার্টি কাস্টমাইজ করা যায়, যেমন: স্পিড, প্রগ্রেস, এবং লুপ। নিচে কিছু কাস্টমাইজেশনের উদাহরণ দেখানো হলো:
১. অ্যানিমেশন স্পিড পরিবর্তন করা
animationView.animationSpeed = 2.0 // অ্যানিমেশন দ্বিগুণ গতিতে চলবে
২. অ্যানিমেশন প্রগ্রেস কন্ট্রোল করা
animationView.currentProgress = 0.5 // অ্যানিমেশন ৫০% অবস্থানে সেট করা হবে
৩. অ্যানিমেশন পজ এবং রিসিউম করা
animationView.pause() // অ্যানিমেশন পজ করা
animationView.play() // অ্যানিমেশন রিসিউম করা
Step 5: Custom Effects এবং Animation Control
Lottie এর সাহায্যে কাস্টম ইফেক্ট এবং অ্যানিমেশন কন্ট্রোল করা যায়, যেমন: কাস্টমাইজড বাটন অ্যাকশনের মাধ্যমে অ্যানিমেশন চালানো বা থামানো।
class ViewController: UIViewController {
let animationView = LottieAnimationView(name: "exampleAnimation")
override func viewDidLoad() {
super.viewDidLoad()
// অ্যানিমেশন ভিউ সেটআপ
animationView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
animationView.center = view.center
animationView.loopMode = .playOnce
animationView.contentMode = .scaleAspectFit
view.addSubview(animationView)
// বাটন তৈরি এবং সেটআপ
let playButton = UIButton(type: .system)
playButton.setTitle("Play Animation", for: .normal)
playButton.frame = CGRect(x: 100, y: view.bounds.height - 100, width: 200, height: 50)
playButton.addTarget(self, action: #selector(playAnimation), for: .touchUpInside)
view.addSubview(playButton)
}
@objc func playAnimation() {
animationView.play { (finished) in
if finished {
print("Animation Finished")
}
}
}
}
ব্যাখ্যা:
- UIButton: একটি কাস্টম বাটন তৈরি করা হয়েছে, যা ট্যাপ করলে অ্যানিমেশন প্লে হয়।
- play() with Completion Handler: অ্যানিমেশন শেষ হলে একটি কাস্টম অ্যাকশন নিতে completion handler ব্যবহার করা হয়েছে।
Step 6: Dynamic Color Change in Lottie Animations
Lottie অ্যানিমেশনগুলোতে কালার পরিবর্তন করা যায়, যা কাস্টম ইফেক্ট যোগ করতে সাহায্য করে।
if let keypath = AnimationKeypath(keypath: "**.Shape Layer 1.Fill 1.Color") {
let colorValueProvider = ColorValueProvider(UIColor.red.lottieColorValue)
animationView.setValueProvider(colorValueProvider, keypath: keypath)
}
ব্যাখ্যা:
- AnimationKeypath: Lottie ফাইলের নির্দিষ্ট অংশের জন্য একটি keypath ব্যবহার করা হয়েছে।
- ColorValueProvider: কালার পরিবর্তন করার জন্য এটি ব্যবহার করা হয়েছে। এখানে একটি নির্দিষ্ট লেয়ারের ফিল কালার লাল করা হয়েছে।
Step 7: Controlling Lottie Animation Playback Using Slider
Lottie অ্যানিমেশনগুলোকে UISlider দিয়ে কন্ট্রোল করা যায়, যা ব্যবহারকারীর ইন্টারঅ্যাকশনের ওপর ভিত্তি করে অ্যানিমেশন নিয়ন্ত্রণ করতে দেয়।
let slider = UISlider(frame: CGRect(x: 20, y: view.bounds.height - 60, width: view.bounds.width - 40, height: 40))
slider.addTarget(self, action: #selector(sliderChanged(_:)), for: .valueChanged)
view.addSubview(slider)
@objc func sliderChanged(_ sender: UISlider) {
animationView.currentProgress = CGFloat(sender.value)
}
ব্যাখ্যা:
- UISlider: একটি স্লাইডার তৈরি করা হয়েছে, যা ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে অ্যানিমেশন প্রগ্রেস কন্ট্রোল করতে দেয়।
Lottie Animations ব্যবহার করার সেরা চর্চা
- Performance Optimization: JSON ফাইলগুলো হালকা হওয়ায় অ্যাপের পারফরম্যান্সে তেমন প্রভাব ফেলে না। তবে বড় অ্যানিমেশন এবং মেমোরি ব্যবহারের ক্ষেত্রে সতর্ক থাকুন।
- Error Handling নিশ্চিত করুন: অ্যানিমেশন লোড হওয়ার সময় JSON ফাইলের সঠিকতা যাচাই করুন এবং এরর হ্যান্ডলিং নিশ্চিত করুন।
- Modular Design: একাধিক Lottie অ্যানিমেশন ব্যবহারের সময় মডুলার ডিজাইন তৈরি করুন, যাতে বিভিন্ন অংশে পুনরায় ব্যবহার করা যায়।
- Accessibility Consideration: VoiceOver এর জন্য Lottie অ্যানিমেশনগুলোকে অ্যাক্সেসিবল রাখার চেষ্টা করুন, যাতে দৃষ্টিহীন ব্যবহারকারীরাও অ্যাপ্লিকেশনটি ব্যবহার করতে পারে।
উপসংহার
Lottie Animations এবং কাস্টম ইফেক্ট ব্যবহার করে iOS অ্যাপে আকর্ষণীয় এবং মসৃণ অ্যানিমেশন যোগ করা যায়, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। Lottie এর JSON ভিত্তিক অ্যানিমেশন এবং বিভিন্ন কাস্টমাইজেশন অপশন ব্যবহার করে ডেভেলপাররা খুব সহজেই জটিল অ্যানিমেশন তৈরি করতে পারেন, যা অ্যাপ্লিকেশনকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে।
Read more
